<template>

  <!--  第六步：创建地图容器元素-->
  <div style="width: 100%; height: 84vh;" id="mapContainer">

  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
// 假设这是你要标注的多个点的数据

const markersData = ref([]);
const outletsArr3=ref([]);
const loadOutlets3 = () => {
  axios.get(BASE_URL + "/v1/vehicle/selectStation").then((response) => {
    if (response.data.code == 2000) {
      outletsArr3.value = response.data.data;
      markersData.value = outletsArr3.value.map(item => ({
        id: item.id,
        stationName: item.stationName,
        stationLocation: item.stationLocation,
        stationPosition: JSON.parse(item.stationPosition),
        createTime: item.createTime,
      }));

      let map = new BMapGL.Map("mapContainer");
      let point = new BMapGL.Point(116.4040, 39.9150);
      map.centerAndZoom(point, 15);

      markersData.value.forEach((markerData) => {
        let icon = new BMapGL.Icon(
            'https://s1.4sai.com/src/img/png/02/0289165d4f314db78acb9e77bd4e6948.png?e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:VI4gpo1M00uRNzCyyiKhoZ6Ab_w=',
            new BMapGL.Size(30, 45)
        );
        let marker = new BMapGL.Marker(new BMapGL.Point(markerData.stationPosition.lng, markerData.stationPosition.lat), { icon: icon });

        map.addOverlay(marker);

        marker.addEventListener('click', () => {
          let infoWindowContent = `
            <div style="width: 300px;margin:0">
              <h2 style="margin-top:0">站点名称：${markerData.stationName}</h2>
              <p>站点位置：${markerData.stationLocation}</p>
              <p>门店电话：021-64160981</p>
              <span>营业时间：8:00-21:00</span>
            </div>
          `;
          // 创建信息窗口
          let infoWindow = new BMapGL.InfoWindow(infoWindowContent);
          map.openInfoWindow(infoWindow, marker.getPosition());
        });
      });

      console.log(markersData.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};

onMounted(() => {
  loadOutlets3();
});
</script>



<style scoped>

</style>
